<template>
  <div class="find_similar_wrapper">
    <div class="find_similar_inner" style="padding: 30px;">


      <div class="search_wrapper" style="display: flex;">
        <el-input style="margin-right: 30px;"
                  placeholder="请输入单词"
                  v-model="search_input"
                  clearable>
        </el-input>
        <el-button type="primary" style="width: 250px;" icon="el-icon-search" @click="findSimilar">搜索</el-button>
      </div>
      <div class="block" style="margin-top: 20px;">
        <span>相似度：≥&nbsp{{rate}}%</span>
        <el-slider v-model="rate"></el-slider>
      </div>
      <WordList :word_list="word_list" v-on:delword = "findSimilar"></WordList>
    </div>
  </div>
</template>

<script>
  import {postRequest} from "../utils/api";
  import WordList from "./WordList";

  export default {
      name: "FindSimilar",
    components: {WordList},
    data(){
        return {
          search_input: '',
          rate: 90,
          word_list: []
        }
      },
      methods: {
        findSimilar(){
          if (this.search_input != ''){
            let param = {src: this.search_input, rate: this.rate,token: window.localStorage.getItem("token")}
            postRequest('word_consumer/find_similar', param).then(res=>{
              this.$message({showClose:true, message: "相似单词数："+JSON.stringify(res.data.t.length), type: 'success'})
              this.word_list = res.data.t
            }).catch(err=>{
              this.$message({showClose:true, message: JSON.stringify(err), type: 'error'})
            })
          }
        }
      }
    }
</script>

<style scoped>

</style>
